<template>
<teleport to="#noti">
  <div
    class="noti-container"
    v-if="show"
  >
  <div class="mark"></div>
  <div class="noti">
        <div class="header">用户使用须知</div>
        <div class="content">
             <h3>关于壁纸来源</h3>
            <p>
            由本站服务显示的壁纸资源从联想电脑管家所获取的，本站不提供下载功能(如需下载壁纸，请到<a href="https://guanjia.lenovo.com.cn/" target="_blank">联想电脑管家下载</a>)。本站是为了个人了解Vue3所编写得前端页面(欢迎到我的博客<a href="http://www.yunmobai.cn/" target="_blank">云墨白</a>了解详情)，只用于展示。本站所有壁纸均来源联想电脑管家中的软件商店中，后端Api是从联想电脑管家中的软件商店获取得；本站对其合法性概不负责，亦不承担任何法律责任。我们无法保证本站不会搜索到并提供包含非预期的或令人反感的内容的链接，并对于由本站服务在任何下载资源信息索引服务中包含的链接或以其它方式由本站服务所链接到的网站之内容不承担任何责任。
            </p>
            <h3>仅供个人使用</h3>
            <p>
            本站服务仅供您个人用于非商业性目的。您不得使用本站服务来销售产品或资源。您不得本站的资源索引，将其重新排版后挪作他用，或在您的网站上设立本站产品主页或其他页面的镜像网页。不得非法将本站展示壁纸用于商业目的。有关详细信息，请与我们联系。您在此保证您不会以任何违反任何适用于您作为本站产品服务的使用者的任何管辖地的法律或法规的方式使用本站产品服务
            </p>
            <h3>知识产权条款</h3>
            <p>

            任何透过本站资源聚合引擎的网页而链接及得到之资源、产品及服务均系本站资源聚合引擎自动搜录，对其合法性概不负责，本站资源中提供的下载资源信息索引中的链接可能包含有由他人享有知识产权的内容;本站尊重他人的知识产权;您理解并同意，对于对他人享有知识产权的内容的下载和利用, 完全出于您自己的判断，由您自己承担风险,本站对此不承担任何责任。


            我们的知识产权政策是对符合《信息网络传播权保护条例》和其它适用的知识产权法律规定的声称侵权之通告进行回复。任何单位或个人认为通过本站服务获得的链接的下载可能涉嫌侵犯其合法权益的，应该及时向本站书面反馈，并请提供身份证明、权属证明及详细侵权情况证明，有关详细信息，请与我们联系 。

            </p>
            <h3>免责声明</h3>
            <p>

            本站服务中所显示的信息或资料的准确性、内容、完整性、合法性、可靠性、可操作性或可用性不承担任何责任。本站服务中的任何信息或材料的删除、存储失败、错误提供或未及时提供不承担任何责任。对因通过服务下载或访问网上的任何信息或材料而导致的任何伤害不承担任何责任。


            本站服务以及所有包含的产品服务的所有材料、信息、产品及服务的按“原样”提供，无任何担保责任。在法律许可的最大范围内，本站及其许可方明确声称其不承诺任何明示、默示和法定的担保，包括（但不限于）对适销性、适用性及不侵权的担保。本站服务的安全性、可靠性、及时性和性能不做任何担保。通过本站服务而获得的任何信息或建议不做任何担保。本站其许可方不对通过本站服务得到的或在其上刊登广告所推介的产品或服务、通过由本站服务提供的任何链接而得到的产品或服务，以及通过在本站服务中所提供的任何链接而得到的任何信息或建议做任何担保。


            您理解并同意，您通过本站下载或获取材料或数据完全出于您自己的判断，由您自己承担风险，同时您将对由下载此类材料或数据而导致的计算机系统损坏或数据损失承担全部责任。


            本站服务包含的下载资源信息内的所有内容并不反映亦不代表任何本站之意见。

            </p>
            <h3>隐私条款</h3>
            <p>
            本站尊重并保护所有使用本站服务的用户的个人隐私权,本站不会主动地泄露给第三方。
            本服务条款的解释权与修改权属于本站。
            </p>
            <p>联系邮箱：1936955617@qq.com</p>

        </div>
        <div class="btn">
            <button class="reject" title="不同意隐私政策，将无法访问本网站！">不同意</button>
            <button class="allow" @click="allow">我同意</button>
        </div>
  </div>
  </div>
</teleport>
</template>

<script lang="ts">
import { defineComponent, onUnmounted ,ref} from 'vue'

export default defineComponent({
  setup() {
    const node = document.createElement('div')
    node.id = 'noti'
    document.body.appendChild(node)
    onUnmounted(() => {
      document.body.removeChild(node)
    })
    const show=ref(true)
    const allow=()=>{
        show.value=false
    }
    return {
        show,
        allow
    }
  }
})
</script>

<style lang="stylus" scoped>
.noti-container 
    .mark
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #000;
        opacity: .4;
        z-index: 451;
    .noti
        position: fixed;
        top: 50%;
        left: 50%;
        width: 480px;
        height: 468px;
        border-radius: 10px;
        background-image: url(https://static.hitv.com/pc/img/ef81d75.png),url(https://static.hitv.com/pc/img/0f47760.png);
        background-position: 0 0,100% 280px;
        background-repeat: no-repeat;
        background-color: #fff;
        box-shadow: 0 0 80px rgba(0,0,0,.25);
        opacity: 1;
        transform: translate(-50%,-50%);
        z-index: 452;
        .header
            margin-top: 45px;
            color: #222;
            font-weight: 700;
            font-size: 28px;
            text-align: center;
        .content::-webkit-scrollbar 
            width: 4px;
            border-radius: 2px;
        .content::-webkit-scrollbar-thumb 
            width: 8px;
            border-radius: 2px;
            background-color: #ccc;
        .content
            width: 480px;
            height: 220px;
            margin: 35px auto 40px;
            overflow-x: hidden;
            overflow-y: scroll;
            h3
                margin: 0 50px 20px;
                font-size 18px
            p
                margin: 0 50px 20px;
                color: #777;
                font-weight: 400;
                font-size: 13px;
                line-height: 22px;
                word-break: break-all;
                text-align: justify;
        .btn
            display flex
            justify-content center
            .reject
                padding 0px 20px
                margin 0 10px
                border: none;
                border-radius: 50px;
                outline: none;
                color: #fff;
                background: #ddd;
                font-weight: 700;
                font-size: 15px;
                line-height: 45px;
             .allow
                padding 0px 50px
                margin 0 10px
                border: none;
                border-radius: 50px;
                outline: none;
                color: #fff;
                background: linear-gradient(90deg,#ff5f00,#ffa000);
                font-weight: 700;
                font-size: 15px;
                line-height: 45px;
@media (max-width: 500px) 
    .noti-container
        .noti
            width 90%
            .content
                width 100%


</style>
